<template>
    <div class="warp">
        <div class="tabs-nav">
            <p :class="{active:index == tabsNavActive}"
               v-for="(item,index) in tabsNav"
               @click="handleTabsNav(index)"
               :key="item"
            >{{ item }}</p>
        </div>
        <div class="content">
            <el-form ref="form" :model="formQuery" size="mini">
                <div class="form-box">
                    <el-form-item label="人员类别" label-width="100px">
                        <el-select size="mini" @change="getTablsData()" v-model="formQuery.type"  placeholder="请选择">
                            <el-option
                                v-for="item in type"
                                :key="item.val"
                                :label="item.label"
                                :value="item.val">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="参评职称" label-width="100px">
                        <el-select size="mini" @change="getTablsData()" v-model="formQuery.typeStatus"
                                   placeholder="请选择">
                            <el-option
                                v-for="item in titles"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="轮次" label-width="100px">
                        <el-select size="mini" @change="getTablsData()" v-model="formQuery.rounds" placeholder="请选择">
                            <el-option
                                v-for="item in rounds"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="query-bar">
                    <el-button @click="handleExport" type="primary" size="small" round>导出</el-button>
                    <el-button @click="handlePopover" type="primary" size="small" round>投票进度</el-button>
                    <el-button size="small" @click="refreshTable" round>刷新</el-button>
                </div>
            </el-form>
            <template v-for="(item,i) in tabsNav">
                <review-results-table v-if="tabsNavActive == i && formQuery.typeStatus && formQuery.rounds"
                                      :tableParams="tableParams"
                                      ref="mychild"
                                      :key="i"></review-results-table>
            </template>
        </div>
        <vote-progress v-if="showPopover" :tableParams="formQuery" :showPopover.sync="showPopover"></vote-progress>
    </div>
</template>

<script>
import reviewResultsTable from '@/components/reviewsManage/reviewResultsTable'
import voteProgress from "@/components/reviewsManage/voteProgress"
import {exportInfo} from "@/service/api";

export default {
    name: "reviewResults",
    data() {
        return {
            tabsNav: ['高教', '科研', '工程', '其他'],
            tabsNavActive: 0,
            formQuery: {
                typeStatus: '',    // 职称
                rounds: '',  //轮次
                type: '1' // 1军人干部 2文职人员
            },
            titles: [
                {label: '续任正高', id: 1},
                {label: '晋升正高', id: 2},
                {label: '续任副高', id: 3},
                {label: '晋升副高', id: 4},
                {label: '续任中职', id: 5},
                {label: '晋升中职', id: 6},
            ],
            rounds: [
                {label: '第一轮', id: 1},
                {label: '第二轮', id: 2},
            ],
            type:[
                {label:'军人干部',val:'1'},
                {label:'文职人员',val:'2'}
            ],
            tableParams: {},
            showPopover: false
        }
    },
    components: {
        reviewResultsTable,
        voteProgress
    },
    created() {
    },
    methods: {
        handleTabsNav(index) {
            this.tabsNavActive = index;
            this.getTablsData()
        },
        getTablsData() {
            this.tableParams = this.formQuery;
            this.tableParams.lastCategory = this.tabsNav[this.tabsNavActive]
        },
        refreshTable() {
            if(this.handleIsShow()){
                this.$nextTick(() => {
                    this.$refs.mychild[0].inits()
                });
            }
        },
        handlePopover() {
            if(this.handleIsShow()){
                this.showPopover = true;
            }
        },
        handleIsShow() {
            if (this.formQuery.typeStatus && this.formQuery.rounds) {
                return true
            } else {
                this.$message({
                    message: '请先选择职称和轮次！',
                    type: 'warning'
                });
                return false
            }
        },
        handleExport() {
            if(this.handleIsShow()){
                this.$nextTick(() => {
                    let userIds = this.$refs.mychild[0].userIds,
                        newUserIds = []
                    if(userIds.length>0){
                        console.log(userIds)
                        for(let item of userIds){
                            newUserIds.push(item.id)
                        }
                    this.getExportInfo(JSON.stringify(newUserIds))
                    }else {
                        this.$message({
                            message: '请勾选需要导出的内容！',
                            type: 'warning'
                        });
                    }
                });
            }
        },
        getExportInfo(userIds) {
            exportInfo({
                method: 'get',
                url: '/admin/into/exportInfo?userIds=' + userIds,
                responseType: 'blob', // important
            }).then(res => {
                const url = window.URL.createObjectURL(new Blob([res]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download',   '参评人员得票结果.xls');
                document.body.appendChild(link);
                link.click();
            });
        }

    },

}
</script>

<style scoped>
.warp {
    height: 100%;
    min-width: 800px;
}

.tabs-nav {
    display: flex;
}

.tabs-nav > p {
    width: 113px;
    height: 38px;
    font-size: 14px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    color: #fff;
    margin-right: 2px;
    background: rgba(49, 71, 143, 1);
    opacity: 0.65;
    cursor: pointer;
    border-radius: 8px 8px 0px 0px;
}

.tabs-nav > p.active {
    opacity: 1;
    background: linear-gradient(0deg, rgba(16, 41, 122, 1) 0%, rgba(50, 85, 200, 1) 100%);
    border-radius: 8px 8px 0px 0px;
}

.content {
    width: 100%;
    min-height: calc(520px - 38px);
    height: calc(100% - 38px);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
    border-radius: 5px;
    overflow: hidden;
}

.content >>> .el-form {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.content >>> .el-form-item--mini.el-form-item {
    margin-bottom: 0px;
}

.content >>> .el-form > .form-box {
    display: flex;
}

.query-bar {
    margin-right: 35px;
}

.query-bar >>> .el-button {
    width: 80px;
    margin-right: 0px;
}

</style>
